"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import {
  IconBed,
  IconUsers,
  IconActivity,
  IconAlertTriangle,
  IconTrendingUp,
  IconTrendingDown,
  IconMinus,
  IconHeartbeat,
  IconClock
} from "@tabler/icons-react"

interface KPIData {
  title: string
  value: string | number
  change: {
    value: number
    type: 'increase' | 'decrease' | 'neutral'
    timeframe: string
  }
  icon: React.ComponentType<any>
  trend: number[]
  status: 'good' | 'warning' | 'critical'
}

// 获取静态KPI数据（避免随机数）
const getStaticKPIData = (): KPIData[] => {
  return [
    {
      title: "床位使用率",
      value: "89%",
      change: {
        value: 2.1,
        type: 'increase',
        timeframe: '较昨日'
      },
      icon: IconBed,
      trend: [78, 80, 83, 86, 88, 89],
      status: 'good'
    },
    {
      title: "患者流量",
      value: "1,250",
      change: {
        value: 4.2,
        type: 'increase',
        timeframe: '较昨日'
      },
      icon: IconUsers,
      trend: [1100, 1150, 1200, 1180, 1220, 1250],
      status: 'good'
    },
    {
      title: "设备效率",
      value: "92%",
      change: {
        value: 1.8,
        type: 'increase',
        timeframe: '较昨日'
      },
      icon: IconActivity,
      trend: [88, 89, 90, 91, 91, 92],
      status: 'good'
    },
    {
      title: "活跃告警",
      value: "3",
      change: {
        value: 1,
        type: 'decrease',
        timeframe: '较昨日'
      },
      icon: IconAlertTriangle,
      trend: [5, 4, 4, 3, 3, 3],
      status: 'good'
    },
    {
      title: "患者满意度",
      value: "4.6",
      change: {
        value: 0.1,
        type: 'increase',
        timeframe: '较昨日'
      },
      icon: IconHeartbeat,
      trend: [4.4, 4.5, 4.5, 4.6, 4.6, 4.6],
      status: 'good'
    },
    {
      title: "平均等待时间",
      value: "25分钟",
      change: {
        value: 2.1,
        type: 'decrease',
        timeframe: '较昨日'
      },
      icon: IconClock,
      trend: [30, 28, 27, 26, 26, 25],
      status: 'good'
    }
  ]
}

export function MedicalKPICards() {
  const kpiData = getStaticKPIData()

  const getTrendIcon = (type: 'increase' | 'decrease' | 'neutral') => {
    switch (type) {
      case 'increase':
        return <IconTrendingUp className="w-4 h-4 text-green-500" />
      case 'decrease':
        return <IconTrendingDown className="w-4 h-4 text-red-500" />
      default:
        return <IconMinus className="w-4 h-4 text-gray-500" />
    }
  }

  const getStatusColor = (status: 'good' | 'warning' | 'critical') => {
    switch (status) {
      case 'good':
        return 'bg-green-100 text-green-800 border-green-200'
      case 'warning':
        return 'bg-yellow-100 text-yellow-800 border-yellow-200'
      case 'critical':
        return 'bg-red-100 text-red-800 border-red-200'
      default:
        return 'bg-gray-100 text-gray-800 border-gray-200'
    }
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {kpiData.map((kpi, index) => (
        <Card key={index} className="relative overflow-hidden">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-gray-600">
              {kpi.title}
            </CardTitle>
            <kpi.icon className="h-4 w-4 text-gray-400" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-gray-900 mb-2">
              {kpi.value}
            </div>
            <div className="flex items-center space-x-2">
              {getTrendIcon(kpi.change.type)}
              <span className={`text-sm ${kpi.change.type === 'increase' ? 'text-green-600' :
                  kpi.change.type === 'decrease' ? 'text-red-600' : 'text-gray-600'
                }`}>
                {kpi.change.value}% {kpi.change.timeframe}
              </span>
            </div>
            <div className="mt-3">
              <Badge
                variant="outline"
                className={`text-xs ${getStatusColor(kpi.status)}`}
              >
                {kpi.status === 'good' ? '良好' :
                  kpi.status === 'warning' ? '警告' : '严重'}
              </Badge>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}